<template>
	<view class="imgbox">
		<view class="title2">
			<text>图片</text>
			<text class="text2">(建议拍摄作物/地块信息等，9张以内)</text>
		</view>
		<view class="imgs">
			<uni-file-picker
				v-model="imageValue"
				:image-styles="imageStyles"
				mode="grid"
				fileMediatype="image"
				limit="9"
				@select="select"
				@progress="progress"
				@success="success"
				@fail="fail"
				@delete="deletes"
			>	
				<view class="deffile">
					<u--image :src="defaultfile" width="40rpx" height="40rpx"></u--image>
					<text class="text">添加照片</text>
				</view>
			</uni-file-picker>
		</view>
	</view>
</template>

<script>
export default {
	name: 'uni-imgs',
	data() {
		return {
			imageValue: [],
			defaultfile:'',
			imageStyles: {
				width: '134rpx',
				height: '134rpx',
				border: {
					color: '#bfbfbf',
					width: 1,
					style: 'solid',
					radius: '8rpx'
				}
			}
		};
	}, 
	methods: {
		// 获取上传状态
		select(e) {
			console.log('选择文件：', e);
			this.$emit('changimgs',this.imageValue)
		},
		// 获取上传进度
		progress(e) {
			console.log('上传进度：', e);
		},

		// 上传成功
		success(e) {
			console.log('上传成功');
		},

		// 上传失败
		fail(e) {
			console.log('上传失败：', e);
		},
		deletes(e){
			console.log(e)
		}
	}
};
</script>

<style lang="scss">
.imgbox {
	background: #fff;
	border-radius: 8rpx;
	margin:20rpx 30rpx 0;
	.imgs{
		padding: 0 20rpx 16rpx;
	}
}
.deffile{
	width: 100%;
	height: 100%;
	background: #f9f9f9;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.text{
		color:#3e3e3e;
		font-size: 24rpx;
		margin-top: 10rpx;
	}
}
</style>
